<template>
   <el-container>
       <vHeadSpace />
       <el-container>
           <vAsideSpace />
           <el-container>
               <el-main class="highload_main">
                   <!--  高负载设备列表页头部栏  -->
                   <div class="itemInfo-header">
                       <p style="margin-bottom: 0;font-size: 1.5rem;font-weight: bolder">高负载设备列表</p>
                       <div class="itemInfo-middle">
                           <span>性能指标：</span>
                           <el-radio-group v-model="tabPosition"  size="small" @change="getValue_new">
                               <el-radio-button label="CPUUtilization">CPU</el-radio-button>
                               <el-radio-button label="MemoryUtilization">内存</el-radio-button>
                           </el-radio-group>
                       </div>
                   </div>
                   <!--  高负载设备列表内容
                     :row-class-name="tableRowClassName"
                     -->
                   <el-table
                           v-loading="isLoading"
                           :data="details_of_hosts"
                           :row-style="{height: '52px'}"
                           :cell-style="{padding: '0'}"
                           style="width: 100%"
                           :height="tableHeight"
                   >
                       <!--宽度统一加了30，后续需要对每个宽度减去30px即可-->
                       <el-table-column
                               prop="number"
                               label="序号"
                               align="center"
                               width="150">
                           <template slot-scope="scope">
                               {{ scope.$index + 1 }}
                           </template>
                       </el-table-column>
                       <el-table-column
                               prop="hostname"
                               label="主机名称"
                               align="center"
                               width="180">
                       </el-table-column>
                       <el-table-column
                               prop="hostinterface"
                               label="接口"
                               align="center"
                               width="200"
                       >
                       </el-table-column>
                       <el-table-column
                               prop="CPU_utilization"
                               label="CPU利用率"
                               align="center"
                               sortable>
                           <!--                    align="center"-->

                           <template slot-scope="scope">
                               <el-progress :percentage="percentageData(scope.row.CPUUtilization)" :color="percentageColor(percentageData(scope.row.CPUUtilization))" :stroke-width="3"></el-progress>
                           </template>
                       </el-table-column>
                       <el-table-column
                               prop="Memory_utilization"
                               label="内存利用率"
                               align="center"
                               sortable>
                           <!--                    align="center"-->

                           <template slot-scope="scope">
                               <el-progress :percentage="percentageData(scope.row.MemoryUtilization)" :color="percentageColor(percentageData(scope.row.MemoryUtilization))" :stroke-width="3"></el-progress>
                           </template>
                       </el-table-column>
                       <el-table-column
                               prop="Memory_utilization"
                               label="高负载进程"
                               align="center">
                           <template slot-scope="scope">
                               <el-button icon="el-icon-search" circle @click="getHighProcessList(scope.row)"></el-button>
                           </template>
                       </el-table-column>

                   </el-table>

                   <el-dialog
                           title="请输入该主机的账号和密码"
                           :visible.sync="dialogVisible"
                           width="30%"
                   >
                       <span>
                  <!-- 输入账号-->
                    <el-row>
                        <el-col :span="3" style="padding-top: 10px"><label>账号：</label></el-col>
                        <el-col :span="20"><el-input v-model="userName" placeholder="请输入账号"></el-input></el-col>
                    </el-row>
                    <br/>
                    <!-- 输入密码 -->
                    <el-row>
                        <el-col :span="3" style="padding-top: 10px"><label>密码：</label></el-col>
                        <el-col :span="20"><el-input v-model="password" show-password placeholder="请输入密码"></el-input></el-col>
                    </el-row>
                </span>

                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="getHighProcessList">确 定</el-button>
                        </span>
                   </el-dialog>
                   <el-dialog
                           title="高负载进程"
                           :visible.sync="dialogOfProcess"
                           width="60%"
                   >
                       <el-table
                               :row-style="{height:'70px'}"
                               :header-cell-style="{'text-align':'center'}"
                               :cell-style="{'text-align':'center'}"
                               :data="details_of_process"
                               style="width: 100%">
                           <el-table-column
                                   prop="number"
                                   label="序号"
                                   align="center"
                                   min-width="10%">
                               <template slot-scope="scope">
                                   {{ scope.$index + 1 }}
                               </template>
                           </el-table-column>
                           <el-table-column
                                   prop="processName"
                                   label="进程"
                                   min-width="50%"
                                   show-tooltip-when-overflow>
                               <template slot-scope="scope">
                                   <span>{{scope.row.processName}}</span>
                               </template>
                           </el-table-column>
                           <el-table-column
                                   prop="cpuUtilization"
                                   label="CPU利用率(%)"
                                   min-width="20%"
                                   sortable>
                           </el-table-column>
                           <el-table-column
                                   prop="memoryUtilization"
                                   label="内存利用率(%)"
                                   min-width="20%"
                                   sortable>
                           </el-table-column>
                       </el-table>
                   </el-dialog>
               </el-main>
               <vFootSpace/>
           </el-container>
       </el-container>
   </el-container>
</template>

<script>
  import axios from 'axios'
  export default {
    provide() {
      return {
        reloadAll: this.reloadAll,
      }
    },
    data() {
      return {
        cur_agent_type: '',
        tableHeight: 0.77*document.body.clientHeight,
        tabPosition: 'CPUUtilization',
        timer: null,
		all_hosts: 0, // 监控主机数
		isLoading: false,
        a_pageSize: 10, // 控制当前页显示数据的数量
        currentPage: 1, // 当前页
          dialogVisible: false,
          dialogOfProcess: false,
          hostIp: '', // 操作主机的Ip
          hostId: '', // 操作主机的Id
          userName: '', // 要操作的主机的账号
          password: '', // 要操作的主机的密码
          monitorLoading: false,
          details_of_process: [],
		direction: 'ttb',
		isRouterAlive: true,
        details_of_hosts: [], // 当前页数据
        options: [{
          value: 'CPUUtilization',
          label: 'CPUUtilization'
        }, {
          value: 'MemoryUtilization',
          label: 'MemoryUtilization'
        }]
      }
    },
      filters: {
          ellipsis(value) {
              if (!value) return "";
              if (value.length > 50) {
                  return value.slice(0, 50) + "...";
              }
              return value;
          }
      },
    mounted() {
      this.isLoading = true;
    },

	/**
	 * 生命周期函数获取监控设备的信息
	 */
    created() {
	  console.log(this.currentPage);
	  let type_name = this.$route.query.type;
        console.log(type_name);
        if (type_name === undefined) {
          this.tabPosition = 'CPUUtilization';
          type_name = 'CPUUtilization'
      }else {
          this.tabPosition = type_name;
      }
        axios({
        method: 'post',
        url: '/monitor/get_high_load_host_list.action',
        data: {
          name : type_name,
          type: "highload",
		  pageNo: this.currentPage,
		  pageSize: this.a_pageSize
        }
      }).then( (res) => {
		console.log(res.data.content.result);
        this.details_of_hosts = res.data.content.result;
		this.all_hosts = res.data.content.count;
		console.log(this.details_of_hosts.length);
        this.isLoading = false;
        this.getValue(type_name)
      })
    },
    methods: {
        percentageData(value) {
            let realVal = Number(parseFloat(value).toFixed(2))
            return realVal
        },
        percentageColor(value){
            let realVal = Number(parseFloat(value).toFixed(2))
            if(realVal >= 70 ){
                return "#FF0000"
            }else if (realVal < 70 && realVal >= 50) {
                return "#B22222";
            }else if (realVal < 50 && realVal >= 20) {
                return "#EEB422";
            }else {
                return "#00FF00";
            }
        },
        showDialog(host) {
            this.dialogOfProcess = true;
            this.hostIp = host.ip;
            this.hostId = host.id;
        },
        getHighProcessList(host) {
            console.log(host)
            axios({
                method: 'post',
                url: '/monitor/get_agent_real_type_by_hostid.action',
                data: {
                    hostId: host.hostid
                }
            }).then((res) => {
                // console.log(res.data.content.result);
                if(res.data.content.result == '1'){
                    // Winodws暂时不适配
                    this.$message.warning("暂不支持！")
                }else if (res.data.content.result == '0' || res.data.content.result == '-1'){
                    // Linux适配
                    this.dialogOfProcess = true;
                    this.hostIp = host.ip;
                    this.hostId = host.hostid;
                    console.log(this.hostIp);
                    console.log(this.hostId);
                    axios({
                        method: 'post',
                        url: '/monitor/get_cpu_usage_by_process.action',
                        data: {
                            hostIp: this.hostIp,
                            hostId: this.hostId
                        }
                    }).then((res) => {
                        this.details_of_process = res.data.content.result;
                    })
                }else {

                }
            })






        },

        // getHighProcessList() {
        //     this.dialogVisible = false;
        //     this.dialogOfProcess = true;
        //     console.log(this.hostIp);
        //     console.log(this.userName);
        //     console.log(this.password);
        //     axios({
        //         method: 'post',
        //         url: '/monitor/get_cpu_usage_by_process.action',
        //         data: {
        //             hostIp: this.hostIp,
        //             userName: this.userName,
        //             password: this.password
        //         }
        //     }).then((res) => {
        //         this.details_of_process = res.data.content.result;
        //     })
        // },
        getValue(val) {
          clearInterval(this.timer)
          this.timer = setInterval( () =>{
            this.getHighHostList(val)
          }, 30000)
        // this.getHighHostList(val)
      },
        getValue_new(val) {
            this.getHighHostList(val)
            // this.getHighHostList(val)
            this.getValue(val)
        },
      getHighHostList(val) {
        this.name = val;
        console.log('你选择了', val)
        axios({
          method: 'post',
          url: '/monitor/get_high_load_host_list.action',
          data: {
            name: this.name,
            type: "highload",
          }
        }).then((res) => {
          this.details_of_hosts = res.data.content.result;
        })
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 0) {
          return 'most-row';
        } else if (rowIndex === 1) {
          return 'more-row';
        } else if (rowIndex === 2){
		  return 'ordinary-row';
		}
        return '';
      }
    },
      destroyed() {
        clearInterval(this.timer)
      }
  }
</script>
<style scoped>
.highload_main{
  padding: 10px;
  height: 90vh;
  margin-top: 60px;
}
.itemInfo-header{
  height: 56px;
  line-height: 56px;
  vertical-align: center;
}
.itemInfo-header p{
  float: left;
  font-size: 30px;
}
.itemInfo-middle{
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  margin-top: 18px;
  float: right;
}
.demo-table-expand .label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
 }
.el-table .most-row {
    background: #c56f6f;
  }

  .el-table .more-row {
    background: #d48f8f;
  }

  .el-table .ordinary-row {
    background: #e6b6b6;
  }
  el-dialog {
   max-height: 500px;
   overflow: auto;
  }
</style>





